import * as React from 'react';
import './Hello.css'

export interface Props {
  name: string;
  enthusiasmLevel?: number; // 属性名?:属性类型  表示此属性是可选的
  onDecrement?: () => void;
  onIncrement?: () => void;
}
/* 
  React创建组件的方式一：函数
*/
function Hello({ name, enthusiasmLevel = 1 ,onDecrement,onIncrement }: Props) { // 属性名：属性类型
  if (enthusiasmLevel <= 0) {
    throw new Error('你需要更大的热情');
  }
  return <div className="hello">
    <div className="greet">
      Hello {name + getGreetings(enthusiasmLevel)}
    </div>
    <div>
      <button onClick={onDecrement}> - </button>
      <button onClick={onIncrement}> + </button>
    </div>
  </div>
}

/* 
  React创建组件的方式二：类
*/
// class Hello extends React.Component<Props, object>{//<Props,object> 是说这种组件只负责根据传入的props来展示，不涉及到state状态的操作
//   render() {
//     const { name, enthusiasmLevel = 1, onDecrement, onIncrement } = this.props;
//     if (enthusiasmLevel <= 0) {
//       throw new Error('你需要更多的热情');
//     }
//     return (
//       <div className="hello">
//         <div className="greet">
//           hello {name + getGreetings(enthusiasmLevel)}
//         </div>
//         <div>
//           <button onClick={onDecrement}> - </button>
//           <button onClick={onIncrement}> + </button>
//         </div>
//       </div>
//     )
//   }
// }

export default Hello;

function getGreetings(count: number) {
  return new Array(count + 1).join('!');
}



